<template>
  <div>
    <div id="myChart" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {};
  },
  beforeDestroy() {},
  mounted() {
    this.getInit();
  },
  methods: {
    getInit() {
      let myChart = echarts.init(document.getElementById("myChart"));

      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line"
          },
          {
            // 设置涟漪特效动画
            type: "effectScatter",
            // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
            coordinateSystem: "cartesian2d",
            // 单个闪烁点 ↓
            data: [{ value: ["Tue", 230], symbolSize: 8 }], //2d坐标系--[x轴, y轴, 标记大小]

            // 多个闪烁点 ↓
            // 方法一 -- start:
            // data: [{value:['Mon',820],symbolSize:10},{value:['Tue',932],symbolSize:10}],
            // 方法一 -- end

            // 方法二 -- start:
            // data: [['Mon',820],['Tue',932]], //2d坐标系--[x轴, y轴, 标记大小]
            // symbolSize: 10,
            // 方法二 -- end

            // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
            showEffectOn: "render",
            // 涟漪特效配置
             rippleEffect: {
              // 波纹的绘制方式,可选'stroke'和'fill'
               color:"green",
               number:1,
              brushType: "stroke",//fill
              period :"1",
               scale:2.5,

            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "red",
                shadowBlur: 30,
                shadowColor: "red"
              }
            },
            zlevel: 1
          }
        ]
      };
     

    //   myChart.dispatchAction({
    //     type: 'dataZoom',
    //     batch: [{
    //         // 第一个 dataZoom 组件
    //         start: 20,
    //         end: 30
    //     }, {
    //         // 第二个 dataZoom 组件
    //         dataZoomIndex: 1,
    //         start: 10,
    //         end: 20
    //     }]
    // })

      myChart.setOption(option);

       setTimeout(() => {
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
          })
      }, 500)
      setTimeout(() => {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0
          })
        }, 4500)

      //  myChart.dispatchAction({
      //     type: 'dataZoom',
      //     start: 20,
      //     end: 30
      // });






    }
  }
};
</script>

<style scoped>
</style>